<template>
    <div class="platform-page page">
        <img width="100%" src="/images/coach_training_banner.jpg"/>
        <div class="content">
            <PlatformCrumb back="返回" style="margin-top: 0;">
            </PlatformCrumb>
            <div class="content event-detail por">
                <div class="tabs" style="margin-top: 0;">
                    <div class="training-content-header">
                        <span>赛事详情</span>
                        <div class="training-content-line"></div>
                        <a class="look-team cur" @click="show_fun">查看参赛队伍</a>
                    </div>
                </div>
                <div class="tabs-container display-flex-row">
                    <img :src="detail.imgs|filtersImg"/>
                    <div class="flex1">
                        <p class="headline-title">{{detail.name}}</p>
                        <p class="headline-detail">参赛年龄：{{detail.age}}岁</p>
                        <p class="headline-detail">时间：{{detail.time}}</p>
                        <p class="headline-detail">场馆：{{detail.venue}} {{detail.address}}</p>
                    </div>
                </div>
            </div>
            <div v-show="isshow" @click="show_fun" class="mask"></div>
            <div v-show="isshow" class="delete_sai">
                <div class="delete_sai_body">
                    <div class="delete_sai_body2 w730">
                        <div class="delete_sai_body2_head w730">
                            <span>参赛队伍</span>
                        </div>
                        <div class="showsai_list pb30" v-if="showRank">
                            <div class="showsai_list1">
                                <div class="showsai_list1s">序号</div>
                                <div class="showsai_list1s">队名</div>
                            </div>
                            <div class="showsai_list2 cur" @click="rankdetail(index)" v-for="(item,index) in RanksList">
                                <div class="showsai_list1s">{{index}}</div>
                                <div class="showsai_list1s">{{item.leaderName}}</div>
                            </div>
                        </div>
                        <div class="showsai_list pb30" v-else>
                            <div class="showsai_list1 showsai_list12">
                                <div class="showsai_list1s title"><p>参赛队伍</p></div>
                                <div class="showsai_list1s">{{Ranksdetail.name}}</div>
                            </div>
                            <div class="showsai_list1 showsai_list12">
                                <div class="showsai_list1s title"><p>负责人姓名</p></div>
                                <div class="showsai_list1s">{{Ranksdetail.leaderName}}</div>
                            </div>
                            <div class="showsai_list1 showsai_list12">
                                <div class="showsai_list1s title"><p>身份证号码</p></div>
                                <div class="showsai_list1s">{{Ranksdetail.leaderNo}}</div>
                            </div>
                            <div class="showsai_list1 showsai_list12">
                                <div class="showsai_list1s title"><p>联系方式</p></div>
                                <div class="showsai_list1s">{{Ranksdetail.leaderPhone}}</div>
                            </div>
                            <div class="showsai_list1 showsai_list12">
                                <div class="showsai_list1s title"><p>邮箱</p></div>
                                <div class="showsai_list1s">{{Ranksdetail.mail}}</div>
                            </div>
                            <div class="showsai_list1 showsai_list12">
                                <div class="showsai_list1s title"><p>微信</p></div>
                                <div class="showsai_list1s">{{Ranksdetail.weChatNo}}</div>
                            </div>
                            <div class="showsai_list1 showsai_list12">
                                <div class="showsai_list1s title"><p>第二联系人姓名</p></div>
                                <div class="showsai_list1s">{{Ranksdetail.twoLeaderName}}</div>
                            </div>
                            <div class="showsai_list1 showsai_list12">
                                <div class="showsai_list1s title"><p>第二联系人电话</p></div>
                                <div class="showsai_list1s">{{Ranksdetail.twoLeaderPhone}}</div>
                            </div>
                            <div class="showsai_list1 cur" @click="rankbank">
                                <p>返回</p>
                            </div>
                        </div>
                    </div>
                </div>
                <i class="el-icon-circle-close cur" @click="show_fun"></i>
            </div>
        </div>
    </div>
</template>

<script>
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import {getDetail, getRanksList} from '../../api/api/platform.js';
    import {baseImgPath, basefile} from '@/config/env.js';

    export default {
        components: {
            PlatformCrumb
        },
        data() {
            return {
                id: this.$route.query.id,
                data: {
                    id: this.$route.query.id
                },
                isshow: false,
                detail: {
                    "address": "",
                    "age": "",
                    "count": 0,
                    "createTime": "",
                    "id": 0,
                    "imgs": "",
                    "money": 0,
                    "name": "",
                    "reason": "",
                    "time": "",
                    "type": 0,
                    "updateTime": "",
                    "venue": ""
                },
                getRanksListdata: {
                    "id": this.$route.query.id ? this.$route.query.id : 0,
                    "pageNum": 1,
                    "pageSize": 100
                },
                RanksList: [],
                Ranksdetail: {},
                showRank: true
            };
        },
        created() {
            this.getDetail()
            this.getRanksList()
        },
        methods: {
            goAdd() {
                var that = this;
                that.$router.push({
                    path: '/platform/matchEdit',
                })
            },
            rankdetail(e) {
                this.showRank = false
                this.Ranksdetail = this.RanksList[e]
            },
            rankbank() {
                this.showRank = true
            },
            getRanksList() {
                var that = this;
                getRanksList(this.getRanksListdata).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        that.RanksList = res.data.list
                    }
                });
            },
            show_fun() {
                this.isshow = !this.isshow
                this.showRank = true
            },
            getDetail() {
                var that = this;
                getDetail(this.data).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        that.detail = res.data
                    }
                });
            },
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
        },
    };
</script>

<style lang="less" scoped>
    @import url("platform.less");

    .operation {
        margin-right: 25px;
    }
</style>
